<template>
  <view class="pa-3">
    <view class="bdrs-8 ov-h">
      <q-item label="头像" clickable @click="clickAvatar">
        <u-avatar :src="userMeta.avatar_url" size="40px"></u-avatar>
        <template #mask>
          <!-- #ifdef MP -->
          <button
            class="pos-mask op-0"
            open-type="chooseAvatar"
            @chooseavatar="onAvatar"
          ></button>
          <!-- #endif -->
        </template>
      </q-item>

      <q-item label="名字">
        <input
          v-if="inMp"
          class="ta-r flex-1"
          type="text"
          placeholder="请输入名字"
          v-model="form.nickname"
          @blur="postName"
        />
        <span v-else>{{ userInfo.nickname }}</span>
      </q-item>
    </view>

    <view class="pos-btm pos-f">
      <view class="mb-5 ta-c op-4 fz-14" @click="$navTo('mine/login')">
        ID: {{ userInfo.id }}
      </view>
      <u-safe-bottom />
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState({
      userInfo: (s) => s.userInfo,
    }),
    userMeta() {
      return this.userInfo.user_metadata || this.userInfo;
    },
  },
  data() {
    return {
      form: {},
      inMp: uni.$h.inMp,
    };
  },
  created() {
    this.form = {
      nickname: "",
      ...this.userMeta,
    };
    this.$store.dispatch("getUserInfo");
  },
  methods: {
    postName() {
      let msg = "";
      const val = this.form.nickname.replace(/\s/g, "");
      if (!val || val == this.userMeta.nickname) {
        return;
      }
      if (val.length > 16) msg = "名字限16个字符";
      if (msg) {
        return this.$toast(msg);
      }
      this.postUserInfo(
        {
          nickname: val,
        },
        "名字"
      );
    },
    async onUpload(file) {
      try {
        this.$loading();
        const { url } = await this.$store.dispatch("uploadFile", {
          path: file.path,
        });
        if (!url) throw "fail";
        console.log(url);
        this.setAvatar(url);
      } catch (error) {
        this.$toast("上传失败");
      }
    },
    onChoose() {
      uni.chooseImage({
        count: 1,
        sourceType: ["album"],
        success: (res) => {
          this.onUpload(res.tempFiles[0]);
        },
      });
    },
    clickAvatar() {
      if (uni.$h.inH5) {
        // this.onChoose();
      } else if (!this.tempload) {
        this.tempload = true;
        this.$loading();
        setTimeout(() => {
          uni.hideLoading();
        }, 600);
      }
    },
    async postUserInfo(body, label = "") {
      try {
        this.$loading("更新中");
        await this.$store.dispatch("postUserInfo", body);
        this.$toast(label + "已更新", 1);
      } catch (error) {
        console.log(error);
      }
    },
    setAvatar(avatar_url) {
      if (avatar_url == this.userMeta.avatar_url) {
        this.$toast("无修改");
        return; //
      }
      this.postUserInfo(
        {
          avatar_url,
        },
        "头像"
      );
    },
    onAvatar(e) {
      // https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html
      // this.setAvatar();
      this.onUpload({
        path: e.detail.avatarUrl,
      });
    },
  },
};
</script>
